<template>
  <!-- 分类列表 -->
  <div class="listBox">
    <div class="list" v-if="dataList.length > 0">
      <div class="itemList" :class="className" v-for="(item, index) in dataList" :key="'l' + index"
        @click="handleGoto(item)">
        <div :class="[className, itemList.code == item.code ? 'active' : '']">
          <img :src="item.imgUrl">
        </div>
        <div class="listTitle">{{ item.title }}</div>
      </div>
    </div>
    <div v-else class="noData">暂无数据</div>
  </div>
</template>

<script>
export default {
  components: {},
  props: {
    dataList: {
      type: Array,
      default: () => []
    },
    itemList: {
      type: Object,
      default: () => { }
    },
    className: {
      type: String,
      default: 'listImg6'
    }
  },
  data() {
    return {

    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  updated() { },
  methods: {
    handleGoto(item) {
      this.$emit('handleGoto', item)
    }
  },
  filters: {},
}
</script>

<style lang="scss" scoped>
.listBox {
  width: 100%;
  height: calc(100% - 25px);
  margin: 25px 0;
  overflow-y: auto;

  .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;

    .itemList {
      position: relative;
      margin: 12px;

      .listTitle {
        width: 100%;
        height: 40px;
        line-height: 32px;
        text-align: center;
        color: #fff;
        padding: 5px 8px;
        background-color: rgb(0, 0, 0, .5);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        position: absolute;
        bottom: 0;
      }
    }

    .listImg6 {
      width: 137px;
      height: 200px;
    }

    .listImg5 {
      width: 169px;
      height: 225px;
    }

    .listImg4 {
      width: 217px;
      height: 285px;
    }

    .active {
      border: 2px dashed red;
      padding: 5px;
    }
  }

  .noData {
    width: 100%;
    height: 603px;
    font-size: 26px;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>